<!-- 联系人 -->
<template>
    <div class="contacts">
        <div class="recent contacts recentContacts">
            <el-row :gutter="24" type="flex" class="row-bg" justify="space-between">
                <el-col :span="14" :offset="1">
                    <div class="grid-content bg-purple">
                        <el-input v-model="searchVal" placeholder="搜索姓名或职位"></el-input>
                    </div>
                </el-col>
                <el-col :span="10" :push="1">
                    <div class="grid-content bg-purple ipt">
                        <el-checkbox v-model="checked" @change="changeChecked">未读消息</el-checkbox>
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-scrollbar>
            <div class="contactsInfo">
                <div
                    class="info"
                    v-for="(item, index) in chat"
                    :key="index"
                    :class="{ infoIsActive: infoIsActive == index }"
                    @click="selectChat(index, item)"
                >
                    <div class="avatar">
                        <el-badge :value="item.unReadNum" :hidden="item.unReadNum == 0" :max="99" class="item">
                            <!-- <img src="../../../../assets/img/avatar.png" alt=""> -->
                            <el-avatar :size="50" src="https://www.zsrencai.cn/static/img/logoM.26125757.png"></el-avatar>
                        </el-badge>
                    </div>
                    <div class="informationDetail">
                        <p class="information">
                            <span class="name">{{ item.senderUserAccountType == 2 ? item.receiverUserName : item.senderUserName }}</span>
                            <span class="time">{{ item.updateTime.slice(0, 11) }}</span>
                        </p>
                        <p class="jobDetails">
                            <span class="companyInfoName">{{ item.lastMsg || '暂无' }}</span>
                            <!-- <el-divider direction="vertical"></el-divider>
              <span class="jobName">{{item.jobName || '暂无'}}</span> -->
                        </p>
                    </div>
                </div>
                <div class="noContacts" v-show="chat.length <= 0">
                    <h6>未与任何求职者沟通</h6>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>

<script>
import { chatGet } from '@/api/chat';
import chatComponent from './chatComponent';
import bus from '@/components/common/bus';
console.log(chatComponent.DataCue, 'DataCue');
export default {
    components: {},
    data() {
        return {
            // 信息数量
            num: 100,
            // 动态class
            infoIsActive: 0,
            // 是否未读消息
            checked: false,
            // 搜索内容
            searchVal: '',
            chat: [
                // { id: '18595747406', name: '杨磊', jobId: '2', resumeId: '2', senderUserId: '3', receiverUserId: '2' }]
            ],
            // 职位详情
            jobDetails: {}
        };
    },
    computed: {},
    watch: {
        searchVal(val) {
            this.chatGet(val);
        }
    },
    methods: {
        // 选中当前联系人 获取相关信息
        selectChat(i, item) {
            this.infoIsActive = i;
            this.$emit('contactsInfo', item);
        },
        // 未读消息
        changeChecked() {
            this.chatGet();
        },
        // 获取联系人列表
        chatGet(content) {
            let obj = {
                content: content || '', //搜索聊天内容
                unRead: this.checked ? 0 : 1 // 未读消息
            };
            chatGet(obj).then(res => {
                if (res.success) {
                    console.log(res.data, '获取联系人列表');
                    this.chat = res.data;
                    // 默认发起聊天
                    if (res.data.length > 0) {
                        this.$emit('contactsInfo', res.data[0]);
                    }
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        readyOrClear() {
            chatComponent.asa;
        }
    },
    created() {
        this.readyOrClear();
        // 获取联系人列表
        this.chatGet();
        // 清空已读数量
        bus.$on('focusEvents', res => {
            console.log(res, 78945644564);
            this.chat.map(item => {
                if (item.id == res.id) {
                    item.unReadNum = 0;
                    console.log('456');
                }
            });
        });
        // 获取未读数量
        bus.$on('uncount', res => {
            console.log(res, 78945644564);
            this.chat.map(item => {
                if (item.chatId == res.chatId) {
                    item.unReadNum = res.unRead;
                    console.log('456');
                }
            });
        });
    },
    mounted() {},
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {}
};
</script>
<style scoped>
.contactsInfo {
    width: 100%;
    height: 550px;
}
.recentContacts {
    width: 100%;
    height: 49px;
    line-height: 49px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 600;
    color: rgba(85, 85, 85, 1);
    border-right: 1px solid rgba(232, 232, 232, 1);
    border-bottom: 1px solid rgba(232, 232, 232, 1);
}

.recentContacts .recent {
    display: inline-block;
    width: 136px;
    text-align: center;
}
.ipt /deep/ .el-checkbox__inner {
    border-radius: 20px;
}
.info {
    width: 257px;
    height: 80px;
    padding: 0 16px;
    border: 1px solid rgba(232, 232, 232, 1);
    border-left: none;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
.info:active {
    background: rgba(242, 247, 249, 0.7);
}
.info:hover {
    background: rgba(242, 247, 249, 0.5);
}
.infoIsActive {
    background: rgba(242, 247, 249, 1);
    /* 一会去掉 */
    /* transform: rotate(360deg);
    transition: transform 1.3s linear; */
}
.avatar {
    width: 44px;
    height: 44px;
    margin-right: 15px;
    border-radius: 50%;
}
.avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 1;
}

.avatar /deep/ .el-badge__content.is-fixed {
    right: 15px;
    top: 5px;
}

.informationDetail {
    width: calc(100% - 70px);
    line-height: 30px;
}

.information {
    display: flex;
    justify-content: space-between;
}
.information .name {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 600;
}

.information .time {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #555555;
}

.jobDetails {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #555555;
}
.jobDetails .companyInfoName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
    display: inline-block;
}

.jobDetails /deep/ .el-divider {
    background: #707070;
}
.noContacts {
    height: 100%;
    text-align: center;
    /* line-height: 593px; */
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    /* border-right: 1px solid rgba(232, 232, 232, 1); */
}
</style>
